// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import QtDesktop 0.1
import ".."

Rectangle {
    id: addJobForm
    Utils {
        id: utils
    }

    width: 400
    height: 300
    border.color: "lightgray"

    signal cancel
    signal add

    property alias fromTime: calendarWidget.dateInSeconds
    property int longTime: 0
    property alias name: nameElement.text
    property alias description: descriptionElement.text

    function setTime(timeInSeconds) {
        monthCalendarModel.dateInSeconds = timeInSeconds
    }

    focus: true

    TextField {
        id: nameElement
        anchors.margins: 20
        anchors.top: addJobForm.top
        anchors.left: addJobForm.left
        anchors.right: addJobForm.right

        KeyNavigation.tab: descriptionElement
        placeholderText: "Enter name job"
        focus: true
        Keys.onPressed: {
            if (event.key === Qt.Key_Return) {
                if(nameElement.text != "")
                    addJobForm.add()
            }
            if (event.key === Qt.Key_Escape) {
                addJobForm.cancel()
            }
        }
    }

    Row {
        id: date_row
        anchors.margins: 10
        anchors.top: nameElement.bottom
        height: 30

        anchors.left: addJobForm.left
        anchors.right: addJobForm.right
        Rectangle {
            id: time
            width: 80
            height: parent.height
            Text {
                anchors.centerIn: parent
                text: (timeWidget.hour < 10 ? "0" : "") + timeWidget.hour + ":" + (timeWidget.minute < 10 ? "0" : "") + timeWidget.minute
            }
            MouseArea {
                anchors.fill: parent
                onClicked: addJobForm.state == "timeEdit" ? addJobForm.state = "idle" : addJobForm.state = "timeEdit"
            }
        }

        Rectangle {
            id: date
            width: 120
            height: parent.height
            Text {
                anchors.centerIn: parent
                text: calendarWidget.day + " " + utils.getMonthName(calendarWidget.month) + " " + calendarWidget.year
            }
            MouseArea {
                anchors.fill: parent
                onClicked: addJobForm.state == "dateEdit" ? addJobForm.state = "idle" : addJobForm.state = "dateEdit"
            }
        }

    }

    TextArea {
        id: descriptionElement
        anchors.margins: 20
        anchors.top: date_row.bottom
        anchors.left: addJobForm.left
        anchors.right: addJobForm.right
        anchors.bottom: okButton.top
        text: "Description job"
        KeyNavigation.tab: okButton
        KeyNavigation.backtab: nameElement
    }

    Button {
        id: cancelButton
        anchors.margins: 20
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        iconSource: "images/toplevel_window.png"
        text: "Cancel"
        onClicked: addJobForm.cancel()
    }
    Button {
        id: okButton
        anchors.right: cancelButton.left
        anchors.bottom: parent.bottom
        anchors.margins: 20
        enabled: nameElement.text != ""
        iconSource: "images/toplevel_window.png"
        text: "Add"
        onClicked: addJobForm.add()
    }

    TimeWidget {
        id: timeWidget
        x: 100
        y: 100
        onDateChanged: {
            console.log("onTimeCh")
            addJobForm.state = "edit"
        }
    }

    CalendarWidget {
        id: calendarWidget
        x: 200
        y: 100
        onDateChanged: {
            console.log("onDateCh")
            addJobForm.state = "edit"
        }
    }

    states: [
        State {
            name: "idle"
            PropertyChanges {
                target: timeWidget
                visible: false
            }
            PropertyChanges {
                target: calendarWidget
                visible: false
            }
        },
        State {
            name: "edit"
            PropertyChanges {
                target: nameElement
                enabled: true
                focus: true
            }
            PropertyChanges {
                target: descriptionElement
                enabled: true
            }
            PropertyChanges {
                target: timeWidget
                visible: false
            }
            PropertyChanges {
                target: calendarWidget
                visible: false
            }//
        },
        State {
            name: "timeEdit"
            PropertyChanges {
                target: timeWidget
                visible: true
            }
            PropertyChanges {
                target: descriptionElement
                enabled: false
            }
            PropertyChanges {
                target: nameElement
                enabled: false
            }
            PropertyChanges {
                target: calendarWidget
                visible: false
            }
        },
        State {
            name: "dateEdit"
            PropertyChanges {
                target: timeWidget
                visible: false
            }
            PropertyChanges {
                target: descriptionElement
                enabled: false
            }
            PropertyChanges {
                target: nameElement
                enabled: false
            }
            PropertyChanges {
                target: calendarWidget
                visible: true
            }
        }
    ]
    state: "idle"

}
